<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      身份认证
    </div>
    <div class="content">
      <div class="text">
        根据相关法规，拍卖、提现、签约认证需要实名，平台 承
        诺不涉及会员金钱账户，信息严格保密
      </div>
      <div class="identity">
        <div>
          <van-uploader :after-read="afterReadOne">
            <img
              :src="info.form.cardOne == '' ? shenfen1 : info.form.cardOne"
              alt=""
            />
            <span v-if="info.form.cardOne == ''">上传/拍摄身份证正面</span>
          </van-uploader>
        </div>
        <div>
          <van-uploader :after-read="afterReadTwo">
            <img
              :src="info.form.cardTwo == '' ? shenfen2 : info.form.cardTwo"
              alt=""
            />
            <span v-if="info.form.cardTwo == ''">上传/拍摄身份证反面</span>
          </van-uploader>
        </div>
      </div>
      <img src="@/assets/image/shenfen3.png" alt="" />
      <div class="form">
        <van-cell-group>
          <van-field
            v-model="info.form.name"
            required
            label="姓名"
            placeholder="请输入用户名"
          />
          <van-field
            v-model="info.form.idCard"
            required
            label="身份证号"
            placeholder="请输入身份证号"
          />
          <van-field
            v-model="info.form.phone"
            required
            label="手机号"
            placeholder="请输入手机号"
          />
        </van-cell-group>
      </div>
      <div class="button" @click="submit">提 交</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getIdentity, setIdentity } from "../../../../api/http.js";
import uploadImg from "../../../public/compress.js";
import shenfen1 from "@/assets/image/shenfen.png";
import shenfen2 from "@/assets/image/shenfen2.png";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const route = useRoute();
    const info = reactive({
      form: {
        name: "",
        idCard: "",
        phone: "",
        cardOne: "",
        cardTwo: "",
      },
    });

    const getInfo = async () => {
      if (route.query.auth === 0) return;
      const { data } = await getIdentity();
      info.form.name = data.name;
      info.form.idCard = data.idCard;
      info.form.phone = data.phone;
      info.form.cardOne = data.cardOne || "";
      info.form.cardTwo = data.cardTwo || "";
      console.log("获取身份认证---", info);
    };

    onMounted(() => {
      getInfo();
    });

    const submit = async () => {
      const reg_user = /^[\u4e00-\u9fa5]{2,4}$/;
      const idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (info.form.cardOne === "" || info.form.cardTwo === "")
        return proxy.$toast.fail("请上传图片");

      if (!reg_user.test(info.form.name))
        return proxy.$toast.fail("姓名填写错误");
      if (!idcardReg.test(info.form.idCard))
        return proxy.$toast.fail("身份证号填写错误");
      if (!reg_tel.test(Number(info.form.phone)))
        return proxy.$toast.fail("手机号填写错误");

      const { msg, code } = await setIdentity(info.form);
      code === 200 ? proxy.$toast.success(msg) : proxy.$toast.fail(msg);
      if (code)
        setTimeout(() => {
          router.go(-1);
        }, 2000);
    };

    const afterReadOne = async (file) => {
      console.log(file);
      const img = await uploadImg(file);
      proxy.$toast.success("图片上传成功");
      info.form.cardOne = img;
    };

    const afterReadTwo = async (file) => {
      const img = await uploadImg(file);
      proxy.$toast.success("图片上传成功");
      info.form.cardTwo = img;
    };

    const router = useRouter();
    const returnFn = () => {
      router.go(-1);
    };

    return {
      info,
      submit,
      afterReadOne,
      afterReadTwo,
      returnFn,
      shenfen1,
      shenfen2,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: #fff;
  color: #666666;
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000;
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }

  .content {
    width: 100%;
    padding: 15px 4%;

    .text {
      margin-top: 10px;
      font-size: 1rem;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 1.6rem;
      letter-spacing: 1px;
    }

    .identity {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > div {
        width: 48%;
        height: 130px;
        text-align: center;
        overflow: hidden;

        img {
          width: 100%;
        }

        span {
          font-size: 0.8rem;
          display: block;
          margin-top: 8px;
          letter-spacing: 1px;
        }
      }
    }

    .form {
      margin-top: 10px;
    }

    & > img {
      margin-top: 20px;
      width: 100%;
    }

    .button {
      width: 70%;
      height: 45px;
      background: #d8b88c;
      border-radius: 50px;
      font-size: 1.1rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #fff;
      text-align: center;
      line-height: 45px;
      margin-left: 15%;
      margin-top: 20px;
    }
  }
}
</style>
